<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片阴影</title>
<style>
    .shadow{
        float:left;
        margin: 50px;
        width:200px;
        height:200px;
    }
    /* 我们在在之前的基础上再加上阴影模糊20px，阴影扩散5px */
    .box1:hover{ box-shadow: 10px 10px 20px 5px #ccc;  }
    .box2:hover{ box-shadow: -10px -10px 20px 5px #ccc;  }
    .box3:hover{ box-shadow: -10px 10px 20px 5px #ccc;  }
    .box4:hover{ box-shadow: 10px -10px 20px 5px #ccc;  }
    /* 我们在试试X轴和Y轴设置为0的效果 */
    .box5:hover{ box-shadow: 0px 0px 20px 5px #ccc;  }

</style>
</head>
<body style="background-color: #000;">
<div style="margin: 200px auto; width:900px;">
<div class="shadow box1">
    <img src="https://pic.qqtn.com/up/2018-1/15151141541879697.jpg" width="100%" />
</div>
<div class="shadow box2">
    <img src="https://pic.qqtn.com/up/2018-1/15151141533633527.jpg" width="100%" />
</div>
<div class="shadow box3">
    <img src="https://pic.qqtn.com/up/2018-1/15155479522444394.jpg" width="100%" />
</div>
<div class="shadow box4">
    <img src="https://pic.qqtn.com/up/2018-1/15155479522444394.jpg" width="100%" />
</div>
<div class="shadow box5">
    <img src="https://pic.qqtn.com/up/2018-1/15155479522444394.jpg" width="100%" />
</div>
</div>
</body>